<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-01 10:53:42
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-04 15:51:57
-->
 <!-- 告诉历览器 Html的版本是H5 -->
 <!DOCTYPE html>
 <!-- 语言English -->
 <html lang="en">
 <!-- 文档头部 -->
 <head>
     <!-- 信息标签 字符编码格式 -->
     <meta charset="UTF—8">
     <!-- 可使用宽度为视口宽度 初始缩放比例为1 -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>世界翻译</title>
     <!-- 设置选项卡图标 -->
      <link rel="icon" href="./img/favicon.png"
      type="image/png">
      <!-- 样式标签 -->
      <style>
        /* 给标签为table的元素设置样式 */
        table,
        /* 给标签为table的子元素里面的th设置样式 */
        table th,
        /* 给标签为table的子元素里面的td设置样式 */
        table td
        {
          /* 设置边框 宽度1px 线条形状实线 线条颜色*/
          border:1px solid black;
          border-collapse: collapse;
        }
        table{
          /* 设置文字的对齐方式 居中 */
          text-align:center;
        }
      </style>
 </head>
 <!-- 文档主体 在网页的视口区显示-->
 <body>
   <table >
     <caption>表名</caption>
     <!-- 表头 -->
     <thead>
       <tr>
         <!--列 -->
         <th>标题1</th>
         <th>标题2</th>
         <th>标题3</th>
         <th>数量</th>
       </tr>
     </thead>
     <!-- 表体 -->
      <tbody>
        <!-- 行 -->
        <tr>
          <!-- 列 -->
          <td rowspan="2">11</td>
          <td>12</td>
          <td>13</td>
          <td>2</td>
        </tr>
        <tr>
          <!-- 列 -->
          <!-- <td>21</td> -->
          <td>22</td>
          <td>23</td>
          <td>3</td>
        </tr>
        <tr>
          <!-- 列 -->
          <td>31</td>
          <td>32</td>
          <td>33</td>
          <td>5</td>
        </tr>
      </tbody>
      <!-- 表脚 -->
       <tfoot>
        <tr>
          <!-- 合并列colspan 合并行rowspan -->
          <th colspan="3">
            总计
          </th>
          <td>
            10
          </td>
        </tr>
       </tfoot>
   </table>
    <div title="hello">hello,world</div>
    <div>hello,world</div>
    hello <br /> world
    <img id ="iconImg" src="./img/image.png" width="88" height="88" alt="图片丢失" />
    <img id ="iconImg" src="./img/image.png" style="width:100px;height:100px;" alt="图片丢失" />
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <a href="https://baidu.com">百度一下，你就知道</a>
    <a href="https://baidu.com">百度一下，你就知道</a>
    <a href="https://baidu.com">百度一下，你就知道</a>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <h3>注册</h3>
    <form action="">
      <div>
        用户名：<input class="formInput" type="text" name="username">
      </div>
      <div>
        密码 ：<input class="formInput" type="password" name="password">
      </div>
      <div>
        性别：
        <label for="genderNan">
          男<input id="genderNan" type="radio" name="gender" value="男">
        </label>
        女<input type="radio" name="gender" value="女">
      </div>
      <div>
        爱好：
        🏀<input type="checkbox" name="like" value="🏀">
        ⚽️<input type="checkbox" name="like" value="⚽️">
        🏓<input type="checkbox" name="like" value="🏓">
      </div>
      <div>
        城市：
        <select name="city">
          <option value="">请选择</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
        </select>
      </div>
      <div>
        生日：
        <input type="date" name="birth">
      </div>
      <div>
        个人介绍：
        <textarea name="info" cols="30" rows="5"></textarea>
      </div>
      <div>
        <!-- 隐藏表单信息 用户看不到 不能修改 但是能修改 -->
        用户类型：<input hidden type="text" name="viptype" value="vip">
      </div>
      <div>
        <!-- 如需要其他功能 要绑定事件 -->
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
      </div>
    </form>
    <!-- <iframe width="300" height="300" src ="http://127.0.0.1:5500/day46/index.html" frameborder="0"></iframe>
    <iframe width="300" height="300" src ="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1" frameborder="10"></iframe> -->
    <!-- 表格 -->
  </body>
  <!-- html的结束标签 -->
  </html>